<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .userMsg{display:none}
        .cont{width:1000px;margin: 10px auto;overflow: hidden;}
        .cont .item{float: left;width:250px;border: solid 1px #ccc;box-sizing: border-box;text-align: center;padding: 10px 0;}
        .cont .item p{height:20px;line-height:20px;overflow: hidden;}
        .cont .item p:nth-of-type(1){height:40px;line-height:20px;overflow: hidden;}
        .cont .item img{width:90%;height:200px;}

        .cont .item em{font-style: normal;display: block;margin: 10px auto;width:100px;height:24px;line-height:24px;text-align: center;border-radius: 4px;background: #ccc;font-size: 14px;cursor: pointer;}
        .cont .item em:hover{background: #99f;color: #fff;}
        .cont .item em:active{background: #55f;color: #fff;}
    </style>
</head>
<body>
    <h1>这是首页</h1>

    <div class="login">
        <a href="./register.html">去注册</a><br>
        <a href="./login.html">去登录</a><br>    
    </div>

    <div class="userMsg">
        <a href="./myinfo.html">xxx</a>已登录，<em>退出</em>
        <br>
        <a href="./cart.html">去结算</a>
    </div>

    <div class="cont">
    </div>

</body>
<script src="./js/ajax.js"></script>
<script src="./js/Toast.js"></script>
<script>

    // 登录守卫
    ajax({
        url:"http://localhost:3000/checklogin",
        data:{
            token: sessionStorage.getItem("token")
        },
        success:res=>{
            res = JSON.parse(res);
            if(res.code === 0){
                $(".login").style.display = "block";
                $(".userMsg").style.display = "none";
            }else{
                $(".login").style.display = "none";
                $(".userMsg").style.display = "block";
                $(".userMsg a").innerText = res.username;
            }
        }
    })

    // 退出
    $(".userMsg em").onclick = function(){
        sessionStorage.setItem("token", "");
        $(".login").style.display = "block";
        $(".userMsg").style.display = "none";
    }


    // 开启请求，获取商品数据
    ajax({
        url:"http://localhost:3000/getgoods",
        data:{
            index:0,
            num:20
        },
        success:res=>{
            res = JSON.parse(res);
            let str = ""
            res.data.forEach(val=>{
                str += `<div class="item" goodsid="${val.goodsId}">
                            <a href="./detail.html#${val.goodsId}">
                                <img src="${val.goodsImg}" alt="">
                                <p>名称：${val.goodsName}</p>
                                <p>原价：${val.price}，现价：${Math.round(val.price * val.discount * 0.1)}</p>
                                <p>销量：${val.sale}</p>
                                <p>库存：${val.stock}</p>
                                <p>评分：${val.score}</p>
                            </a>
                            <em class="addCart">加入购物车</em>
                        </div>`
            })
            $(".cont").innerHTML = str;
        }
    })

    // 使用事件委托添加 加入购物车 按钮的点击事件
    $(".cont").onclick = function(eve){
        const e = eve || window.event;
        const target = e.target || e.srcElement;
        if(target.className === "addCart"){
            // 获取当前按钮对应的商品id
            const id = target.parentNode.getAttribute("goodsid");
            // 发起添加购物车请求，将要添加到购物车中的数据，发送给后端
            ajax({
                type:"post",
                url:"http://localhost:3000/addCart",
                data:{
                    token:sessionStorage.getItem("token"),
                    goodsId: id,
                    num: 1
                },
                success:(res)=>{
                    // 请求完成后，解析数据，判断结构，设计交互
                    res = JSON.parse(res);
                    if(res.code === 0){
                        new Toast({
                            text:"未登录不能加入购物车",
                            color:"red"
                        })
                    }else if(res.code === 1){
                        new Toast({
                            text: res.msg,
                            color: "green"
                        })
                    }
                }
            })
        }
    }


    function $(sel){
        return document.querySelector(sel);
    }
    function $$(sel){
        return document.querySelectorAll(sel);
    }
    
</script>
</html>